<template>
    <div class="imageinfoContainer">
        <!-- 顶部 基础信息 -->
        <section class="top">
            <h3 class="title">{{imgInfo.title}}</h3>
            <p class="subinfo">
                <span class="author">发布者:{{imgInfo.author}}</span>
                <span class="add_time">{{imgInfo.add_time|dateFormat}}</span>
                <span class="click_count">阅读量:{{imgInfo.click_count}}</span>
            </p>
        </section>
        <!-- 简介 -->
        <section class="abstract">
            <p v-html="imgInfo.abstract"></p>
        </section>
        <!-- 缩略图 -->
        <section class="thumbs">
            <!-- vue-preview使用步骤*8 -->
            <!-- 1.安装 npm i vue-preview -S -->
            <!-- 2.在main.js上导入
            import VuePreview from 'vue-preview' -->
            <!-- 3.挂载到Vue上Vue.use(VuePreview); -->
            <!-- 4.在组件的template模板中使用它，标签名是vue-preview 
                其中 :slides 属性使用来绑定具体的图片数据，这个属性必须有-->
            <!-- 在业务逻辑中同过ajax请求获取数据 -->
            <vue-preview :slides="this.thumbsList" class="imgPrev"> 
            </vue-preview>
        </section>
        <!-- 评论 -->
        <section class="cmt">
            <comment :id="this.imgId"></comment>
        </section>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
import comment from '../subComponents/comment'

export default {
    data(){
        return{
            imgId:this.$route.params.id,
            imgInfo:{},
            thumbsList:[],
        }
    },
    created(){
        this.getImageInfo();
        this.getTumbsList();
    },
    methods:{
        //获取图片的基础信息
        getImageInfo(){
            this.$http({
                method:'get',
                url:'/images/imagesinfo',
                params:{
                    imgid:this.imgId,
                }
            }).then(res => {
                var data = res.data;
                if(data.Status == 0){
                    this.imgInfo = data.Data[0];
                }else{
                    Toast("获取图片信息失败")
                }
            })
        },
        //获取图片的缩略图
        getTumbsList(){
            this.$http({
                method:'get',
                url:'/thumbs/'+this.imgId,
            }).then(res =>{
                var data = res.data;
                if(data.Status == 0){
                    data.Data.forEach(item =>{
                        item.w = 600,
                        item.h = 400,
                        item.src = item.img_url,
                        item.msrc = item.img_url
                    });
                    this.thumbsList = data.Data;
                    console.log(this.thumbsList);
                }else{
                    Toast("获取图片信息失败")
                }
            })
        }
    },
    components:{
        comment,
    }
}
</script>

<style lang="less">
.imageinfoContainer{
    padding: 10px;
    padding-bottom: 40px;
    .top{
        border-bottom:1px solid #bbb;
        .title{
            font-size: 20px;
            color: #333;
            font-family: "微软雅黑";
            text-align: center;
        }
        .subinfo{
            padding: 10px 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
    }
    .abstract{
        p{
            font-size: 14px;
            padding: 10px;
            color:#444;
            text-indent: 2em;
            line-height: 22px;
        }
        
    }
    .thumbs{
        .imgPrev{
            .my-gallery{
                figure{
                    display: inline-block;
                    margin: 9px;
                    img{
                        width: 80px;
                        height: 60px;
                    }
                }
            }
        }
    }
}
</style>